 <!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>监控视频回放</title> 
    <link rel="shortcut icon" href="${WEB_PATH}/resources/img/logo.png">
    <style>
    	.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "${camera.name}：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 10px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    width:98%;
		    height:500px;
		}
		.demo1:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "后视频：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		    
		}
		.demo1 {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    width:98%;
		    height:500px;
		}
	</style>
</head>

<body >  
    <div class="row" style="padding-top:10px;">
    	<div class="col-sm-12"  >
        	<div style="" class="demo ui-sortable" >
        		<embed type="application/x-vlc-plugin" width="100%" height="100%"  id="vlc"></embed>
	        </div>
        </div>
    </div>
    <script >
    	function myBrowser(){
		     var explorer = window.navigator.userAgent.toLowerCase() ;
			 //ie 
			 if (explorer.indexOf("trident") >= 0) {
			    explorer.length;
			    var ver=explorer.substring(explorer.indexOf("rv:")+3,explorer.lastIndexOf(")"))
			    return {type:"IE",version:ver};
			 }
			 //firefox 
			 else if (explorer.indexOf("firefox") >= 0) {
			    var ver=explorer.match(/firefox\/([\d.]+)/)[1];
			    return {type:"Firefox",version:ver};
			 }
			 //Chrome
			 else if(explorer.indexOf("chrome") >= 0){
			    var ver=explorer.match(/chrome\/([\d.]+)/)[1];
			    return {type:"Chrome",version:ver};
			 }
			 //Opera
			 else if(explorer.indexOf("opera") >= 0){
			 	var ver=explorer.match(/opera.([\d.]+)/)[1];
			 	return {type:"Opera",version:ver};
			 }
			 //Safari
			 else if(explorer.indexOf("Safari") >= 0){
			 	var ver=explorer.match(/version\/([\d.]+)/)[1];
			 	return {type:"Safari",version:ver};
			 }
		}
		
		function isInsalledIEVLC(){ 
			var vlcObj = null;
			var vlcInstalled= false;
			var vlc = document.getElementById("vlc");
			try {
			//	vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2"); 
			     vlcObj =  vlc.getVersionInfo()
				if( vlcObj != null ){ 
					vlcInstalled = true 
				}
			} catch (e) {
				vlcInstalled= false;
			}       
			return vlcInstalled;
		}
	
		function isInsalledFFVLC(){
	         var numPlugins=navigator.plugins.length;
	         for  (i=0;i<numPlugins;i++)
	         {
	              plugin=navigator.plugins[i];
	              if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1)
	            {    
	                 return true;
					 
	            }
	         }
	         return false; 
	     }  
		 
    	$(function(){
    	    var obj = myBrowser();
			if (obj.type != "IE" && obj.type != "Firefox") {
			    layer.alert('<span style="color: #ed5565">请使用IE或火狐浏览器！</span>', {
				  icon: 5,
				  skin: 'layer-ext-moon',
				  yes: function(index, layero){
				      parent.layer.closeAll();
				  }
				});
			}else{
				if ("IE" == obj.type) {
				   if(!isInsalledIEVLC()){
				   	    layer.confirm('尊敬的用户您好：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">请安装视频播放插件后进行播放!</span>',{icon: 3, title:'视频播放信息提示',btn: ['下载']},
			    		function(){
	                		window.location.href='../../resources/vlc/vlc-2.2.4-win32.exe';
	                		parent.layer.closeAll();
						});
				   } 
				}
				if ("Firefox" == obj.type) {
				   if(!isInsalledIEVLC()){
				   	    layer.confirm('尊敬的用户您好：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">请安装视频播放插件后进行播放!</span>',{icon: 3, title:'视频播放信息提示',btn: ['下载']},
			    		function(){
			    			window.open("${WEB_PATH}/resources/vlc/vlc-2.2.4-win32.exe");
	                		parent.layer.closeAll();
						});
				   } 
				}
			}
        });
        
        var vlc = document.getElementById("vlc");  
		var options = new Array("rtsp-tcp")
		var id = vlc.playlist.add("rtsp://${camera.userName}:${camera.password}@${camera.IP}:${camera.prot}${camera.videoVideo.pram}", "fancy name", options);
		vlc.playlist.playItem(id);
		vlc.audio.toggleMute(); 
    </script>
</body>

</html>